<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>完善个人信息</title>
    <script src="plugins/common/common-js.js" type="text/javascript"></script>
    <script src="plugins/js/jquery-3.4.1.min.js" type="text/javascript"></script>
    <script src="plugins/js/jquery-citys.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/user_information.css">
</head>

<body>
    <div id="app" v-cloak>
        <el-container>
            <el-header height="70px">
                <el-row type="flex" justify="center">
                    <el-col :span="7">
                        <span>欢迎使用传染病接触自查系统，身份证为:</span>
                    </el-col>
                    <el-col :span="4">
                        <span>{{ this.userCookie.idCard }}</span>
                    </el-col>
                    <el-col :span="2">
                        <span>的用户</span>
                    </el-col>

                </el-row>
                <el-row type="flex" v-show="vshow.userShow">
                    <el-col :span="4" :offset="21">
                        <el-button icon="el-icon-delete" circle @click="clearUser()"></el-button>
                        <span>清除个人信息</span>
                    </el-col>
                </el-row>
            </el-header>
        </el-container>
        <el-container>
            <el-aside style="width:200px; background-color:#545c64">
                <el-menu default-active="userMsg" class="el-menu-vertical-demo" background-color="#545c64"
                    text-color="#fff" active-text-color="#ffd04b" @select="selectPage">
                    <el-menu-item index="index">
                        <i class="el-icon-location"></i>
                        <span slot="title">首页</span>
                    </el-menu-item>
                    <el-menu-item index="userMsg">
                        <i class="el-icon-setting"></i>
                        <span slot="title">完善个人信息</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <i class="el-icon-document"></i>
                        <span slot="title">求助</span>
                    </el-menu-item>
                    <el-menu-item index="userArea">
						<i class="el-icon-menu"></i>
						<span slot="title">疫情期间去过的地区</span>
					</el-menu-item>
                </el-menu>
            </el-aside>
            <el-main v-loading="vshow.loading">
                <el-row type="flex" justify="center" v-show="vshow.showButton">
                    <el-form :inline="true" :model="user" ref="user" :rules="rules" label-width="80px">
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="user.name"></el-input>
                        </el-form-item>
                        <el-form-item label="身份证" prop="idCard">
                            <el-input v-model="user.idCard"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button icon="el-icon-search" circle @click="searchMsg('user')"></el-button>
                        </el-form-item>
                    </el-form>
                </el-row>
                <el-row  v-show="vshow.showMsg">
                    <el-row>
                        <el-col :span="3" :offset="6">
                            <span>居住城市</span>
                        </el-col>
                        <el-col :span="10">
                            <div class="citys" id="citys">
                                <select class="city-select" id="province" name="province"></select>
                                <select class="city-select" id="city" name="city"></select>
                                <select class="city-select" id="area" name="area"></select>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row type="flex">
                        <el-col :span="3" :offset="6">
                            <span>性别</span>
                        </el-col>
                        <el-col :span="5">
                            <el-radio v-model="userCookie.sex" label="男">男</el-radio>
                            <el-radio v-model="userCookie.sex" label="女">女</el-radio>
                        </el-col>
                    </el-row>
                    <el-row type="flex">
                        <el-col :span="3" :offset="6">
                            <span>年龄</span>
                        </el-col>
                        <el-col :span="4">
                            <el-input v-model="userCookie.age" type="number">
                                <template slot="append">岁</template>
                            </el-input>
                        </el-col>
                    </el-row>
                    <el-row type="flex">
                        <el-col :span="3" :offset="6">
                            <span>检测次数</span>
                        </el-col>
                        <el-col :span="4">
                            <el-input v-model="userCookie.jcNum">
                                <template slot="append">次</template>
                            </el-input>
                        </el-col>
                    </el-row>
                    <el-row type="flex">
                        <el-col :span="3" :offset="6">
                            <span>身体情况</span>
                        </el-col>
                        <el-col :span="4">
                            <el-select v-model="userCookie.jcbNum" placeholder="基础病情况">
                                <el-option v-for="item in jichubing" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                    <el-row type="flex">
                        <el-col :span="3" :offset="6">
                            <span>手机号</span>
                        </el-col>
                        <el-col :span="4">
                            <el-input v-model="userCookie.phone">
                            </el-input>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="3" :offset="6">
                            <span>邮箱</span>
                        </el-col>
                        <el-col :span="4">
                            <el-input v-model="userCookie.email">
                            </el-input>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2" :offset="8">
                            <el-button type="submit" @click="submitMsg">更新</el-button>
                        </el-col>
                    </el-row>
                </el-row>
            </el-main>
        </el-container>
    </div>

    <script src="js/user_information.js" type="text/javascript"></script>
</body>


</html>